<template>
	<view class="app-container">
		<u-form labelPosition="top" :model="userInfo" :labelStyle="labelStyle" labelWidth="auto">
			<image :src="userInfo.avatatUrl ? userInfo.avatatUrl : defaultAvatar" class="app-avatar avatar" @click="handleUploadAvatar"></image>
			<u-form-item label="姓名" prop="nickname">
				<view class="userinfo-input">
					<u-input v-model="userInfo.nickname" border="none"></u-input>
				</view>
			</u-form-item>
			<u-form-item label="签名" prop="signature">
				<view class="userinfo-input">
					<u-input v-model="userInfo.signature" border="none"></u-input>
				</view>
			</u-form-item>
			<u-form-item label="性别" prop="sex">
				<view class="userinfo-sex">
					<view :class="manSexOption" @click="handleSelectSex(0)">
						<u-icon name="man" :color="userInfo.sex == 0 ? '#6190e8' : '#999'"></u-icon>
						<view>男</view>
					</view>
					<view :class="womanSexOption" @click="handleSelectSex(1)">
						<u-icon name="woman" :color="userInfo.sex == 1 ? '#ff6a6c' : '#999'"></u-icon>
						<view>女</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="手机号" prop="phone">
				<view class="userinfo-input">
					<u-input v-model="userInfo.phone" border="none" type="number"></u-input>
				</view>
			</u-form-item>
			<u-form-item label="所在地区" prop="region">
				<view class="userinfo-input" @click="showRegionPicker = true">
					{{ userInfo.province }} - {{ userInfo.city }} - {{ userInfo.district }}
				</view>
			</u-form-item>
		</u-form>
		<view class="submit-button">
			<u-button :color="themeColor" @click="submitUserInfo">发布</u-button>
		</view>
		<u-picker
			ref="uPicker"
			:show="showRegionPicker"
			:columns="regionList"
			keyName="label"
			@cancel="showRegionPicker = false"
			@confirm="showRegionPicker = false"
			@change="handleChangeRegion"
		></u-picker>
	</view>
</template>

<script>
import getRegionList from '@/api/region.js';
import { baseurl } from '@/api/http.js';
import request from '@/api/http.js';

export default {
	computed: {
		labelStyle() {
			return {
				color: '#999',
				marginBottom: '10rpx'
			};
		},
		manSexOption() {
			return ['userinfo-sex-option', this.userInfo.sex === 0 ? 'man-active' : ''];
		},
		womanSexOption() {
			return ['userinfo-sex-option', this.userInfo.sex === 1 ? 'woman-active' : ''];
		}
	},
	data() {
		return {
			userInfo: {
				name: '捉友用户',
				sex: null,
				phone: '',
				province: '北京市',
				city: '北京市',
				district: '东城区',
				provinceId: '',
				cityId: '',
				districtId: ''
			},
			rules: {
				'userInfo.name': [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				],
				'userInfo.sex': [
					{
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					}
				]
			},
			showRegionPicker: false,
			columns: [['中国', '美国', '日本']],
			regionList: []
		};
	},
	mounted() {
		this.regionList = getRegionList(1, 1);
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		async getUserInfo() {
			const openid = uni.getStorageSync('openid');
			const res = await request(`/user/getUserData?openid=${openid}`);
			this.userInfo = res.data;
		},
		async submitUserInfo() {
			const openid = uni.getStorageSync('openid');
			const res = await request(`/user/updateUserData`, this.userInfo, 'POST');
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		},
		handleSelectSex(index) {
			this.userInfo.sex = index;
		},
		handleChangeRegion(val) {
			let picker = this.$refs.uPicker;
			// 改变省份
			if (val.columnIndex == 0) {
				let provinceId = val.value[0].value; // 所选省份id
				this.regionList = getRegionList(provinceId, null);
				picker.setColumnValues(1, this.regionList[1]);
				picker.setColumnValues(2, this.regionList[2]);
				this.userInfo.province = val.value[0].label; // 所选省份
				this.userInfo.city = this.regionList[1][0].name; // 所选城市
				this.userInfo.district = this.regionList[2][0].label; // 所选区县
			}
			if (val.columnIndex == 1) {
				let provinceId = val.value[0].value;
				let cityId = val.value[1].value;
				this.regionList = getRegionList(provinceId, cityId);
				picker.setColumnValues(2, this.regionList[2]);
				this.userInfo.province = val.value[0].label; // 所选省份
				this.userInfo.city = val.value[1].label; // 所选城市
				this.userInfo.district = this.regionList[2][0].label; // 所选区县
			}
			if (val.columnIndex == 2) {
				this.userInfo.province = val.value[0].label; // 所选省份
				this.userInfo.city = val.value[1].label; // 所选城市
				this.userInfo.district = val.value[2].label; // 所选区县
			}
			console.log(this.regionList);
			console.log(val);
			// // this.userInfo.changeRegion = val
		},
		async handleUploadAvatar() {
			const token = uni.getStorageSync('token');
			const userId = uni.getStorageSync('userId');
			
			const res = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera']
			});
			const tempFilePaths = res.tempFilePaths;
			const uploadRes = await uni.uploadFile({
				url: baseurl + '/user/uploadAvatar', //仅为示例，并非真实的接口地址
				filePath: tempFilePaths[0],
				header: {
					authentication: token,
					id: userId
				},
				formData: {
					userId: userId
				},
				name: 'file'
			});
			this.userInfo.avatar = uploadRes.data;
			console.log(this.userInfo.avatar);
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.u-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #333;

	.u-form-item {
		width: 650rpx;
	}

	.userinfo-input {
		$padding-width: 30rpx;
		$padding-height: 20rpx;

		width: calc(100% - $padding-width * 2);
		background-color: #fafafa;
		padding: $padding-height $padding-width;
		border-radius: 20rpx;
	}

	.userinfo-sex {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		gap: 20rpx;

		&-option {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 80rpx;
			padding: 0 25rpx;
			border: 1px solid #ccc;
			border-radius: 100rpx;
			margin: 20rpx 0;
			transition: all 0.3s;
		}

		.man-active {
			border: 1px solid #6190e8;
			color: #6190e8;
		}
		.woman-active {
			border: 1px solid #ff6a6c;
			color: #ff6a6c;
		}
	}

	.u-icon {
		margin-right: 10rpx;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx auto;
	}
}
.submit-button {
	width: 700rpx;
	margin-top: 100rpx;
	z-index: 10002;
}
</style>
